<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <script>
      function expectWidthHeight(element, width, height) {
        try {
          expect(Math.abs(element.clientWidth - width) <= 1).toBe(true);
        } catch {
          expect(element.clientWidth).toBe(width); // Better message.
        }
      }

      run(async function () {
        const container = document.createElement('main');

        container.setAttribute('id', 'webchat');

        const { directLine, store } = testHelpers.createDirectLineEmulator();

        const render = overrideProps => WebChat.renderWebChat({ directLine, store, ...overrideProps }, container);

        render({
          styleOptions: {
            bubbleImageMaxHeight: 240,
            bubbleImageMinHeight: 180
          }
        });

        document.body.append(container);

        await host.windowSize(360, 1280, document.getElementById('webchat'));

        await pageConditions.uiConnected();

        // Generated from https://placeholder.pics/svg/320x180.
        const LANDSCAPE_SVG = `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="320" height="180"><rect x="2" y="2" width="316" height="176" style="fill:%23DEDEDE;stroke:%23555555;stroke-width:2"/><text x="50%" y="50%" font-size="18" text-anchor="middle" alignment-baseline="middle" font-family="monospace, sans-serif" fill="%23555555">320×180 (16:9)</text></svg>`;

        // Generated from https://placeholder.pics/svg/180x320.
        const PORTRAIT_SVG = `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="320"><rect x="2" y="2" width="176" height="316" style="fill:%23DEDEDE;stroke:%23555555;stroke-width:2"/><text x="50%" y="50%" font-size="18" text-anchor="middle" alignment-baseline="middle" font-family="monospace, sans-serif" fill="%23555555">180×320 (9:16)</text></svg>`;

        // Generated from https://placeholder.pics/svg/640x180.
        const WIDE_SVG = `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="640" height="180"><rect x="2" y="2" width="636" height="176" style="fill:%23DEDEDE;stroke:%23555555;stroke-width:2"/><text x="50%" y="50%" font-size="18" text-anchor="middle" alignment-baseline="middle" font-family="monospace, sans-serif" fill="%23555555">640×180 (32:9)</text></svg>`;

        await directLine.emulateIncomingActivity({
          attachments: [
            {
              contentType: 'image/svg+xml',
              contentUrl: WIDE_SVG,
              thumbnailUrl: WIDE_SVG
            },
            {
              contentType: 'image/svg+xml',
              contentUrl: LANDSCAPE_SVG,
              thumbnailUrl: LANDSCAPE_SVG
            },
            {
              contentType: 'image/svg+xml',
              contentUrl: PORTRAIT_SVG,
              thumbnailUrl: PORTRAIT_SVG
            }
          ],
          from: { role: 'user' },
          text: 'Images with varies `bubbleImageMaxHeight` and `bubbleImageMinHeight`.',
          type: 'message'
        });

        await pageConditions.allImagesLoaded();
        await pageConditions.scrollToBottomCompleted();

        const imageElements = pageElements.activities()[0].querySelectorAll('.webchat__fixed-width-image');
        const wideImage = imageElements[0];
        const landscapeImage = imageElements[1];
        const portraitImage = imageElements[2];

        expectWidthHeight(wideImage, 339, 180);
        expectWidthHeight(landscapeImage, 339, 339 / 16 / 9);
        expectWidthHeight(portraitImage, 339, 240);

        await host.snapshot();

        render({
          styleOptions: {
            bubbleImageMinHeight: 240,
            bubbleImageMaxHeight: 360
          }
        });

        await pageConditions.scrollToBottomCompleted();

        await pageConditions.became('image resized', () => wideImage.clientHeight === 240, 5_000);

        expectWidthHeight(wideImage, 338, 240);
        expectWidthHeight(landscapeImage, 338, 240);
        expectWidthHeight(portraitImage, 338, 360);

        await host.snapshot();

        render({
          styleOptions: {
            bubbleImageMinHeight: 120,
            bubbleImageMaxHeight: 180
          }
        });

        await pageConditions.scrollToBottomCompleted();

        await pageConditions.became('image resized', () => wideImage.clientHeight === 120, 5_000);

        expectWidthHeight(wideImage, 338, 120);
        expectWidthHeight(landscapeImage, 338, 180);
        expectWidthHeight(portraitImage, 338, 180);

        await host.snapshot();

        render({
          styleOptions: {
            bubbleImageMinHeight: 0,
            bubbleImageMaxHeight: Infinity
          }
        });

        await pageConditions.scrollToBottomCompleted();

        await pageConditions.became('image resized', () => Math.abs(wideImage.clientHeight - 95) <= 1, 5_000);

        expectWidthHeight(wideImage, 338, 338 / (32 / 9));
        expectWidthHeight(landscapeImage, 338, 338 / (16 / 9));
        expectWidthHeight(portraitImage, 338, 338 / (9 / 16));

        await host.snapshot();
      });
    </script>
  </body>
</html>
